<!--
 * @Description: 主页tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: charles
 * @LastEditTime: 2021-12-21 17:02:20
-->
<template>
  <div class="home">
    <van-nav-bar title="首页" />
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <div class="order_list" v-if="workOrderData.list.length>0">
        <div class="order" v-for="o in workOrderData.list" :key="o.id">
          <div class="time">{{o.create_time}}</div>
          <van-row>
            <van-col span="6" style="text-align:center;font-size:48px">
              <van-icon name="balance-list-o" />
            </van-col>
            <van-col span="18">
              <div>类型： {{o.type}} </div>
              <div>状态： {{o.status}} </div>
              <div>设备： {{o.device_name}} </div>
              <div>工程： {{o.engineer_name}} </div>
              <div>描述： {{o.bill_why}} </div>
            </van-col>
          </van-row>
          <div class="btns">
            <van-button plain hairline size="mini" type="primary" @click="toTakeOrderHandler(o.id)">接单</van-button>
          </div>
        </div>
      </div>
      <div v-else style="padding:2em 0;text-align:center;color:red">
        暂无工单
      </div>
   </van-pull-refresh>
  </div>
</template>
<script>
import {get} from '../../http/axios'
import {mapState} from 'vuex'
import {Toast} from 'vant'
export default {
  data(){
    return {
      params:{
        page:1,
        pageSize:10,
        status:'待接单'
      },
      loading:false,
      workOrderData:{list:[]}
    }
  },
  computed: {
    ...mapState('user',['info'])
  },
  mounted() {
    this.loadWorkOrder();
  },
  methods:{
    onRefresh(){
      setTimeout(() => {
        Toast('刷新成功');
        this.loading = false;
      }, 1000);
    },
    // 接单
    toTakeOrderHandler(id){
      // 1. 获取工单id和用户id
      let account_id = this.info.id;
      let params = {id,account_id}
      // 2. 调用接口完成接单
      let url = "/workorder/takeOrder"
      get(url,params).then(resp => {
        // 3. 提示
        Toast.success(resp.message)
        this.loadWorkOrder();
      })
    },
    loadWorkOrder(){
      let url = "/workorder/pageQuery"
      get(url,this.params).then(resp => {
        this.workOrderData = resp.data;
      })
    }
  }
}
</script>
<style scoped>
.home {
  font-size: 14px;
  color: #666;
  padding-bottom: 50px;
  background-color: #f4f4f4;
}
.home .order_list{
  padding: .5em;
}
.home .order_list > .order {
  background-color: #fff;
  margin-bottom: .5em;
  border-radius: 5px;
  padding:.5em
}
.home .order_list > .order > .time {
  line-height: 2.4em;
  border-bottom: 1px solid #f4f4f4;
}
.home .order_list > .order > .btns {
  padding: .5em;
  text-align: right;
}
</style>